<template>
  <div id="app">
    <div>
      <b-navbar toggleable="lg" type="dark" variant="info">
        <b-navbar-toggle target="nav-collapse" />
        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav v-for="(nav,idx) in navs" :key="idx">
            <b-nav-item
              v-if="!nav.subNavigator || nav.subNavigator.length === 0"
              :to="{ path: '/' + ( nav.linkType === 'home' ? '': nav.linkType ), query: nav.link && { id: nav.link } }"
            >{{ nav.name }}</b-nav-item>
            <b-nav-item-dropdown v-else :text="nav.name">
              <b-dropdown-item
                v-for="(sub, index) in nav.subNavigator"
                :key="index"
                :to="{ path: '/' + sub.linkType, query: { id: sub.link } }"
              >{{ sub.name }}</b-dropdown-item>
            </b-nav-item-dropdown>
          </b-navbar-nav>
          <!-- Right aligned nav items -->
        </b-collapse>
      </b-navbar>
    </div>
    <div @click="goDetails">
      <b-carousel
        id="carousel-1"
        ref="carousel"
        :interval="4000"
        controls
        indicators
        background="#ababab"
        :no-touch="true"
        style="text-shadow: 1px 1px 2px #333;"
      >
        <!-- Text slides with image -->
        <b-carousel-slide
          v-for="(banner, idx) in banners"
          :id="'slide-'+idx"
          :key="idx"
          @click="goDetails()"
        >
          <template #img>
            <div class="img-wrap">
              <img
                class="d-block img-fluid w-100"
                :src="banner.value"
                alt="image slot"
              >
            </div>
          </template>
        </b-carousel-slide>
      </b-carousel>
    </div>
    <b-container fluid>

      <main style="margin-top: 10px">
        <nuxt />
      </main>
    </b-container>
    <div class="footer">
      <div v-for="(item, idx) in footers" :key="idx">
        {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script>
import { getByCode } from '~/api/basicConfig/index'

import { login, getUserInfo } from '~/api/user/index'

export default {
  name: 'Default',
  data() {
    return {
      banners: [],
      user: {
        username: '',
        password: '',
        login: false
      }
    }
  },
  computed: {
    footers() {
      return this.$nuxt.$store.state.layout.footers
    },
    navs() {
      return this.$nuxt.$store.state.layout.navs
    }
  },
  mounted() {
    getByCode({
      classifyCode: 'banner'
    }).then(res => {
      this.banners = res.data.basicItems
    })
    getUserInfo().then(res => {
      this.user = {
        ...(res.data),
        login: true
      }
      console.log(this.user.login)
    }).catch(e => {
      console.log('u, ', e)
    })
  },
  methods: {
    goDetails() {
      const index = this.$refs.carousel.index
      if (this.banners.length > index) {
        const banner = this.banners[index]
        if (banner.linkType && banner.linkType !== 'noLink') {
          this.$router.push({
            path: `/${banner.linkType}?id=${banner.link}`
          })
        }
      }
    },
    login(evt) {
      evt.preventDefault()
      const { username, password } = this.user
      login({
        username,
        password
      }).then(res => {
        this.user = {
          ...(res.data),
          login: true
        }
      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style>
  #app {
    width: 100%;
    margin: 0 auto;
  }
  .container {
    margin: 0 auto;
  }

  .footer {
    text-align: center;
    margin-top: 10px;
  }

  .img-wrap {
    height: 175px;
    overflow: hidden;
  }
  @media(min-width: 720px) {
    .img-wrap {
      height: 175px;
      overflow: hidden;
      padding-left: calc(50% - 350px);
      padding-right: calc(50% - 350px);
      background: #fff;
    }
    .navbar {
      padding-left: calc(50% - 560px);
    }
  }
  @media (min-width: 1200px) {
    .img-wrap {
      height: 280px;
      overflow: hidden;
      padding-left: calc(50% - 560px);
      padding-right: calc(50% - 560px);
      background: #fff;
    }

    .navbar {
      padding-left: calc(50% - 560px);
    }
  }
  .img-wrap img {
    height: 100%;
    width: auto;
  }
  .img-fluid {
    min-height: 300px;
  }

  .img-wrap >>> .d-block.img-fluid.w-100 {
    width: auto;
  }
  .modal-body.error {
    color: #bd2130;
  }

  .footer {
    background: #0f6674;
    padding: 10px 0 10px 0;
    color: #fff;
  }
</style>
